<template>

<div class="playbox">
  <!-- <span>{{paused}}</span> -->
  <div class="player" :style="style">
   
 
  
      
 </div>
 <div class="audio">
      <!-- <audio ref="audio" :src="audioUrl" 
      @timeupdate="timeupdate"
      ></audio> -->
    </div>
    <div class="content">
      <!-- 播放导航条 -->
        <div class="contenthead">
          <span class="iconfont icon-fanhui" @click="$router.back()"></span>
          <span class="iconfont icon-fenxiang"></span>
        </div>
        <div class="musiccover" :style="style" @click="$store.commit('changepaused',!paused)">
         <div class="mask" v-if="!paused">
         </div>
         <div class="control" >
           <span class="iconfont icon-bofang" v-if="!paused"></span>
           
         </div>
         <div class="tags">
           <span class="iconfont icon-hashjinghao"></span>
           <span>POP</span>
         </div>
        </div>
        <!-- 歌曲信息 -->
        <div class="songsinfo">
          <div class="infotop">
            <span class="songname">
              Groove Back (Feat. Gaeko)
            </span>
            <span :class="isLove==false?'notlove iconfont icon-zanxinxingguanzhu':'lovered iconfont icon-zanxinxingguanzhu'"   @click="addlove">
            </span>
          </div>
          <div class="inforbottom">
             <div class="bottomleft">
               <img src="../../assets/img/ceshi.jpeg" alt="">
               <span class="singer">朴振荣/ GAEKO</span>
             </div>
             <span class="iconfont icon-gengduo "  @click="$router.push('/playlist')"></span>
          </div>

        </div>
        <!-- 歌词 -->
          <div class="geci">
            
      <ul>

           <li >
          <!-- <span>{{toplic}}</span> -->

        </li>

        
        <li >
          <span>{{curLyric}}</span>

        </li>


        <li >
          <span>{{bottomlic}}</span>

        </li>
       
        
      </ul>
  
          </div>
           <!-- 控制条 -->
           <div class="bottomcontrol">
             <div class="controltop">
               <div class="topl">
                    {{curtime | formatSeconds }}

               </div>
               <div class="topr">
                 {{duration | formatSeconds  }}
                
              

               </div>
             </div>
             <div class="controlbottom">
               <label>
                      <input 
             type="range"
             v-model="currentTime"
             :max="duration"
             >
             <section class="progress">
          <div
            class="mask"
            :style="{
              width:
                 (curtime/duration) *100 +'%',
            }"
          ></div>
             </section>
               </label>
                 

             </div>
         
           </div>
    </div>
  </div>
  
</template>

<script>
import axios from "axios";
import {get} from '../../http/request'
import {mapState,mapGetters} from 'vuex'
export default {
  

  components:{
    // playpage
  }
  ,
  computed:{
    ...mapState(['curtime','paused','duration','songlist','songid','lovelist']),
    isExis(){
      let islove=false
      this.lovelist.forEach(item=>{
        if(item.id==this.songid){
          islove=true
        }
        else{
          islove=false
        }
        
      })
      return islove
    }
    

  },
  data() {
    return {
      isLove:false
      ,
      currentTime:0
      ,
      marginbottom:'margin-bottom:0px;'
      ,
      budle:false
      ,
      timeArr:[],
      gecilist: [],
      isplay: false,
      style: "",
      audioUrl: "",
      songDetail: "",
      lastLy:'',
      lyric:{},
      toplic:'',
      curLyric:'',
      bottomlic:'',
      historylic:[]
    };
  },
  
  watch:{
     curtime(){
       
      // 获取歌曲进行的时间
      console.log('watchcurtime');
      // 获取歌曲总时长

      let currentTime = Math.floor(this.curtime)
       // 避免空白出现
      if (this.lyric[currentTime]) {
        
        this.historylic.unshift(this.lyric[currentTime])

        this.historylic=[...new Set(this.historylic)]

        // console.log(this.historylic);
          
        this.curLyric = this.lyric[currentTime]

        this.lastLy = this.curLyric

        // console.log(this.lyric[currentTime]);

      } else {
        this.curLyric = this.lastLy
      }
    },
  
   
    
    curLyric(){

      this.gecilist.forEach((item,index)=>{
        
        if(item==this.curLyric){

          console.log(index,item);

          this.toplic= this.gecilist[index-1]

          this.bottomlic=this.gecilist[index+1]

        }
      })
    },
    currentTime(newValue){
      console.log('curtimechange');
      this.$store.commit('changeccur',newValue)
    }
 ,
    songid(){
        let url1 = `/song/url?id=${this.songid}`;

    get(url1).then((response) => {

      console.log(response);

      this.audioUrl = response.data.data[0].url;

      console.log(this.audioUrl);


    });

    let url2 = `/song/detail?ids=${this.songid}`;
    // 获取歌曲详情

    get(url2).then((response) => {
      
      console.log('歌曲详情',response);

      console.log(response.data.songs[0].al.picUrl);

      this.songDetail = response.data.songs[0].al;

      this.style = `background-image: url(${this.songDetail.picUrl})`;
    });

    let url3 = `/lyric?id=${this.songid}`;

    let reg = /\[.+?\]/g 

    get(url3).then((response) => {

      this.gecilist = response.data.lrc.lyric.split("\n");

      this.timeArr =response.data.lrc.lyric.match(reg) 
      
      console.log(this.timeArr);

      
      this.gecilist = this.gecilist.map((item) => {
        return item.split("]")[1];
      });

          let lyricObj = {} // 保存歌词的对象, key是秒, value是显示的歌词

      this.timeArr.forEach((item, index) => {
        // 拆分[00:00.000]这个格式字符串, 把分钟数字取出, 转换成秒
        let ms = item.split(':')[0].split('')[2] * 60
        // 拆分[00:00.000]这个格式字符串, 把十位的秒拿出来, 如果是0, 去拿下一位数字, 否则直接用2位的值
        let ss = item.split(':')[1].split('.')[0].split('')[0] === '0' ? item.split(':')[1].split('.')[0].split('')[1] : item.split(':')[1].split('.')[0]
        // 秒数作为key, 对应歌词作为value
        lyricObj[ms + Number(ss)] = this.gecilist[index]
      })

       this.toplic=this.gecilist[1]

       this.curLyric=this.gecilist[2]

       this.bottomlic=this.gecilist[3]
           
      // 返回得到的歌词对象(可以打印看看)

      console.log(this.gecilist);

      console.log(lyricObj);

      this.lyric=lyricObj
      
      return lyricObj

    
    });

    
    }
      
  },

  methods: {
    // 添加喜欢
     addlove(){
       if(!this.isExis){
         this.$store.commit('addlove',this.songid)
         console.log(this.lovelist);
         this.isLove=true

       }
       else{
         console.log('歌曲已经存在');
         this.$store.commit('deletelove',this.songid)
         this.isLove=false
         
       }
      
      
     }
   
  },
  mounted() {
    // 判断是否为喜欢
    if(!this.isExis){
       
         this.isLove=false
       }else{
         this.isLove=true
       }


    // 获取歌曲
    let url1 = `/song/url?id=${this.songid}`;

    get(url1).then((response) => {

      console.log(response);

      this.audioUrl = response.data.data[0].url;

      console.log(this.audioUrl);


    });

    let url2 = `/song/detail?ids=${this.songid}`;
    // 获取歌曲详情

    get(url2).then((response) => {
      
      console.log('歌曲详情',response);

      console.log(response.data.songs[0].al.picUrl);

      this.songDetail = response.data.songs[0].al;

      this.style = `background-image: url(${this.songDetail.picUrl})`;
    });

    let url3 = `/lyric?id=${this.$route.params.id}`;

    let reg = /\[.+?\]/g 

    get(url3).then((response) => {

      this.gecilist = response.data.lrc.lyric.split("\n");

      this.timeArr =response.data.lrc.lyric.match(reg) 
      
      console.log(this.timeArr);

      
      this.gecilist = this.gecilist.map((item) => {
        return item.split("]")[1];
      });

          let lyricObj = {} // 保存歌词的对象, key是秒, value是显示的歌词

      this.timeArr.forEach((item, index) => {
        // 拆分[00:00.000]这个格式字符串, 把分钟数字取出, 转换成秒
        let ms = item.split(':')[0].split('')[2] * 60
        // 拆分[00:00.000]这个格式字符串, 把十位的秒拿出来, 如果是0, 去拿下一位数字, 否则直接用2位的值
        let ss = item.split(':')[1].split('.')[0].split('')[0] === '0' ? item.split(':')[1].split('.')[0].split('')[1] : item.split(':')[1].split('.')[0]
        // 秒数作为key, 对应歌词作为value
        lyricObj[ms + Number(ss)] = this.gecilist[index]
      })

       this.toplic=this.gecilist[1]

       this.curLyric=this.gecilist[2]

       this.bottomlic=this.gecilist[3]
           
      // 返回得到的歌词对象(可以打印看看)

      console.log(this.gecilist);

      console.log(lyricObj);

      this.lyric=lyricObj
      
      return lyricObj

    
    });

  
 },
  //vue过滤器filters,跟钩子函数平级
  filters: {
    //创建函数名formatSeconds
    formatSeconds(value) {
      let result = parseInt(value);
 
      let y =
        Math.floor(result / 86400) < 10
          ? "0" + Math.floor(result / 86400)
          : Math.floor(result / 86400);
 
      let h =
        Math.floor((result / 3600) % 24) < 10
          ? "0" + Math.floor((result / 3600) % 24)
          : Math.floor((result / 3600) % 24);
 
      let m =
        Math.floor((result / 60) % 60) < 10
          ? "0" + Math.floor((result / 60) % 60)
          : Math.floor((result / 60) % 60);
 
      let s =
        Math.floor(result % 60) < 10
          ? "0" + Math.floor(result % 60)
          : Math.floor(result % 60);
 
      let res = "";
     
 
       res += `${m}:`;
 
      res += `${s}`;
 
      return res;
    },
  },
};
</script>

<style lang="scss" scoped>
@import url(../../comman/css/payer.css);

</style>
